import React, { Component } from 'react'
import Button from './Button'

class Form extends Component {
  state = {
    value: '',
    url: ''
  }

  handleChange = e => this.setState({value: e.target.value})

  handleUrlChange = e => this.setState({url: e.target.value})

  handleSubmit = e => {
    this.props.onReceiveItem({
      url: this.state.url,
      title: this.state.value
    })
    this.setState({
      value: '',
      url: ''
    })
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.url} onChange={this.handleUrlChange} />
        <br />
        <textarea cols="30" rows="10"
          value={this.state.value}
          onChange={this.handleChange}
        ></textarea>
        <br />
        <Button onBtnClick={this.handleSubmit}>提交</Button>
      </div>
    );
  }
}

export default Form;